<!doctype html>
<html>

  <head>
    <meta charset="utf-8">
    <title>工序</title>
    <meta name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../../../css/mui.min.css" rel="stylesheet" />
    <link href="../css/common.css" rel="stylesheet" />
    <style>
      .mui-pull-bottom-tips {
        text-align: center;
      }

      .mui-pull-top-tips {
        position: absolute;
        top: -20px;
        left: 50%;
        margin-left: -25px;
        width: 40px;
        height: 40px;
        border-radius: 100%;
        z-index: 1;
      }

      .mui-bar~.mui-pull-top-tips {
        top: 24px;
      }

      .mui-pull-top-wrapper {
        width: 42px;
        height: 42px;
        display: block;
        text-align: center;
        background-color: #efeff4;
        border: 1px solid #ddd;
        border-radius: 25px;
        background-clip: padding-box;
        box-shadow: 0 4px 10px #bbb;
        overflow: hidden;
      }

      .mui-pull-top-tips.mui-transitioning {
        -webkit-transition-duration: 200ms;
        transition-duration: 200ms;
      }

      .mui-pull-top-tips .mui-pull-loading {
        /*-webkit-backface-visibility: hidden;
      				-webkit-transition-duration: 400ms;
      				transition-duration: 400ms;*/
        margin: 0;
      }

      .mui-pull-top-wrapper .mui-icon,
      .mui-pull-top-wrapper .mui-spinner {
        margin-top: 7px;
      }

      .mui-pull-top-wrapper .mui-icon.mui-reverse {
        /*-webkit-transform: rotate(180deg) translateZ(0);*/
      }

      .mui-pull-bottom-tips {
        text-align: center;
        background-color: #efeff4;
        font-size: 15px;
        line-height: 40px;
        color: #777;
      }

      .mui-pull-top-canvas {
        overflow: hidden;
        background-color: #fafafa;
        border-radius: 40px;
        box-shadow: 0 4px 10px #bbb;
        width: 40px;
        height: 40px;
        margin: 0 auto;
      }

      .mui-pull-top-canvas canvas {
        width: 40px;
      }

      .mui-card {
        border-radius: 5px;
        box-shadow: none;
        padding: 10px 20px;
      }

      .mui-card-header {
        padding: 0 0 10px 0;
        position: relative;
        font-size: 16px;
      }

      .lists {
        padding: 10px 15px 0 0;
      }

      .lists li {
        margin-bottom: 10px;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
      }

      .lists li .left_name {
        color: #9098AB;
        white-space: nowrap;
      }

      .lists li .right_name {
        color: #333333;
        float: right;
      }

      .btntxt {
        width: 100%;
        text-align: right;
        font-size: 14px;
        padding-right: 20px;
        color: #3188FE;
      }

      .mui-navigate-right:after,
      .mui-push-right:after {
        right: 15px;
        color: #3188FE;
      }

      .indexs {
        display: inline-block;
        width: 20px;
        height: 20px;
        background-color: #3188FE;
        border-radius: 50%;
        color: #fff;
        text-align: center;
        margin-right: 5px;
      }

      .txt_l {
        display: inline-block;
      }

      .tgs {
        display: inline-block;
        height: 30px;
        margin-left: 5px;
      }

      .tgs:before {
        display: inline-block;
        content: "";
        width: 30px;
        height: 30px;
        vertical-align: middle;
        background: url(../img/task/yichang.png) no-repeat;
        background-size: 100%;
        margin-right: 5px;
      }

      .tags {
        display: inline-block;
        width: 80px;
        height: 40px;
        vertical-align: middle;
      }

      .tags1 {
        background: url(../img/task/yinzhang_tinggongdaijiandian.png) no-repeat;
        background-size: 100%;
      }

      .tags2 {
        background: url(../img/task/xianchangjianzhengdian.png) no-repeat;
        background-size: 100%;
      }

      .tags3 {
        background: url(../img/task/yinzhang_pangzhandian.png) no-repeat;
        background-size: 100%;
      }

      .tags4 {
        background: url(../img/task/yinzhang_tinggongdaijiandian.png) no-repeat;
        background-size: 100%;
      }

      .marks {
        display: inline-block;
        width: 70px;
        height: 26px;
        line-height: 26px;
        background-color: #10B7AF;
        border-radius: 2px;
        color: #fff;
        text-align: center;
        transform: skewX(-15deg);
      }

      .m_r {
        padding-right: 25px;

      }

      .card_content .mui-navigate-right:after {
        right: 0 !important;
        top: 18px;
        color: #B4C0CF;
        font-size: 20px;
      }

      .sx_s {
        color: #fff;
      }

      .sx_s span {
        font-size: 17px;
      }

      .b_g {
        background-color: #10B7AF;
      }

      .b_g1 {
        background-color: #3188FE;
      }

      .b_g2 {
        background-color: #B4C0CF;
      }

      .b_red {
        background-color: red;
      }

      .screens {
        position: absolute;
        top: 44px;
        left: 0;
        width: 100%;
        min-height: 200px;
        background-color: #fff;
        z-index: 999;
      }

      .content_ul {
        padding: 30px;
        overflow: hidden;
      }

      .content_ul .rowli ul {
        padding: 0;
        margin: 0;
        list-style: none;
        border-bottom: solid 1px #DCDCDC;
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        /* justify-content: space-between; */
      }

      .rowli ul li {
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        background-color: #F5F6F7;
        border: solid 1px #C2CFDA;
        border-radius: 3px;
        color: #000;
        /* float: left; */
        margin-right: 20px;
        margin-bottom: 20px;
        box-sizing: border-box;
        /* flex-grow: 1; */
      }

      .rowli ul li.ls {
        background-color: #3188FE;
        color: #fff;
      }

      .btnli {
        text-align: center;
        padding-top: 30px;
        display: flex;
        justify-content: space-between;
      }

      .btnli .btns {
        background-color: #E7ECF1;
      }

      .btnli button {
        width: 45%;
      }

      .head_s {
        padding: 0 20px;
        border-bottom: solid 1px #DCDCDC !important;
        /* height: 20px; */
      }
    </style>
  </head>

  <body>
    <div id="container">
      <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">工序</h1>
        <!-- <a class="mui-icon mui-icon-right-nav mui-pull-right mui-icon mui-icon-gear sx_s" @click="getSearch"><span>筛选</span></a> -->
      </header>
      <div class="mui-content app-container">
        <div id="slider" class="mui-slider mui-fullscreen">
          <div class="tab-content mui-slider-group" id="tab-content">
            <div id="item1" class="mui-slider-item mui-control-content mui-active">
              <div id="scroll" class="regular-scroll mui-scroll-wrapper">
                <div class="mui-scroll">
                  <div>
                    <ul class="mui-table-view">
                      <li class="mui-table-view-cell mui-collapse" v-for="(item,index) in projectList"
                        :key="item.deviceId" v-cloak>
                        <a class="mui-navigate-right" href="#">{{item.deviceName}}</a>

                        <div class="mui-collapse-content" style="padding:0;background-color: #efeff4;">
                          <div class="mui-card card_content" v-if="item.taskWps.length > 0"
                            v-for="(item_a,a) in item.taskWps" :key="item_a.id" v-cloak>
                            <!--页眉，放置标题-->
                            <div class="mui-card-header" @tap="toDetail(item_a,a)">
                              <!-- <span class="indexs">1 </span> -->

                              <span class="txt_l">
                                <span class="mui-badge mui-badge-primary">{{a+1}}</span>
                                <span class="tags" :class="getTag(item_a.tagId)"></span>
                                <span class="tgs" v-if="item_a.isAnomaly">异常</span>
                              </span>
                              <span class="m_r mui-navigate-right">
                                <span class="marks" :class="status(item_a,0)">{{status(item_a,1)}}</span>
                              </span>

                            </div>
                            <div class="mui-card-content" style="padding: 0 15px 15px 0;">
                              <ul class="mui-table-view lists">
                                <li class="lis">
                                  <span class="left_name">工序编号：</span>
                                  <span class="right_name">{{item_a.code}}</span>
                                </li>
                                <li class="lis">
                                  <span class="left_name">作业项目：</span>
                                  <span class="right_name">{{item_a.jobProject}}</span>
                                </li>
                                <li class="lis">
                                  <span class="left_name">作业方法：</span>
                                  <span class="right_name">{{item_a.jobMethod}}</span>
                                </li>
                              </ul>
                            </div>
                          </div>
                          <ul class="mui-table-view mui-table-view-chevron" style="margin-top: 0;">
                            <li v-for="(b,i) in item.childs" :key="b.deviceId" class="mui-table-view-cell" style="padding-left: -15px;padding-right: -30px;padding-top: 5px;">
                              <a v-if="b.taskWps.length > 0" class="mui-navigate-right" href="#">{{b.parentName}}/{{b.deviceName}}</a>
                              <div class="mui-collapse-content" style="padding:0;background-color: #efeff4;">
                                <div class="mui-card card_content" v-for="(item_b,b) in b.taskWps" :key="item_b.id" v-cloak style="margin-right:25px;">
                                  <!--页眉，放置标题-->
                                  <div class="mui-card-header" @tap="toDetail(item_b,b)">
                                    <!-- <span class="indexs">1 </span> -->

                                    <span class="txt_l">
                                      <span class="mui-badge mui-badge-primary">{{b+1}}</span>
                                      <span class="tags" :class="getTag(item_b.tagId)"></span>
                                      <span class="tgs" v-if="item_b.isAnomaly">异常</span>
                                    </span>
                                    <span class="m_r mui-navigate-right">
                                      <span class="marks" :class="status(item_b,0)">{{status(item_b,1)}}</span>
                                    </span>

                                  </div>
                                  <div class="mui-card-content" style="padding: 0 15px;">
                                    <ul class="mui-table-view lists">
                                      <li class="lis">
                                        <span class="left_name">工序编号：</span>
                                        <span class="right_name">{{item_b.code}}</span>
                                      </li>
                                      <li class="lis">
                                        <span class="left_name">作业项目：</span>
                                        <span class="right_name">{{item_b.jobProject}}</span>
                                      </li>
                                      <li class="lis">
                                        <span class="left_name">作业方法：</span>
                                        <span class="right_name">{{item_b.jobMethod}}</span>
                                      </li>
                                    </ul>
                                  </div>
                                </div>
                                <ul class="mui-table-view mui-table-view-chevron" style="margin: 0px;padding: 0;">
                                  <li v-for="(c,i) in b.childs" :key="c.deviceId" class="mui-table-view-cell" style="padding-left: 15px;padding-right: 30px;padding-top: 5px;">
                                    <a v-if="c.taskWps.length > 0" href="#" style="padding-top: 10px;">{{c.parentName}}/{{c.deviceName}}</a>
                                    <div class="mui-collapse-content" style="padding:0px;background-color: #efeff4;">
                                      <div class="mui-card card_content" v-for="(item_c,c) in c.taskWps" :key="item.id" v-cloak>
                                        <!--页眉，放置标题-->
                                        <div class="mui-card-header" @tap="toDetail(item_c,c)">
                                          <!-- <span class="indexs">1 </span> -->

                                          <span class="txt_l">
                                            <span class="mui-badge mui-badge-primary">{{c+1}}</span>
                                            <span class="tags" :class="getTag(item_c.tagId)"></span>
                                            <span class="tgs" v-if="item_c.isAnomaly">异常</span>
                                          </span>
                                          <span class="m_r mui-navigate-right">
                                            <span class="marks" :class="status(item_c,0)">{{status(item_c,1)}}</span>
                                          </span>

                                        </div>
                                        <div class="mui-card-content" style="padding: 0 15px;">
                                          <ul class="mui-table-view lists">
                                            <li class="lis">
                                              <span class="left_name">工序编号：</span>
                                              <span class="right_name">{{item_c.code}}</span>
                                            </li>
                                            <li class="lis">
                                              <span class="left_name">作业项目：</span>
                                              <span class="right_name">{{item_c.jobProject}}</span>
                                            </li>
                                            <li class="lis">
                                              <span class="left_name">作业方法：</span>
                                              <span class="right_name">{{item_c.jobMethod}}</span>
                                            </li>
                                          </ul>
                                        </div>
                                      </div>
                                    </div>
                                  </li>

                                </ul>

                              </div>
                            </li>

                          </ul>
                        </div>
                      </li>
                    </ul>

                  </div>
                </div>
                <!--</div>-->
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="screens mui-popover mui-popover-top">
        <div class="head_s mui-segmented-control mui-segmented-control-inverted mui-segmented-control-primary "
          style="background-color: #fff;">
          <a class="mui-control-item mui-active" href="#item1"><span class="txt">全部</span></a>

          <a class="mui-control-item" href="#item2"><span class="txt">已完成</span></a>
          <a class="mui-control-item" href="#item3"><span class="txt">未完成</span></a>
        </div>
        <div class="content_ul">
          <div class="rowli">
            <ul>
              <li class="ls">1</li>
              <li>2</li>
              <li>3</li>
              <li>1</li>
              <li>2</li>
              <li>3</li>
              <li>1</li>
              <li>2</li>
              <li>3</li>
            </ul>
          </div>
          <div class="btnli">
            <button type="button" class="mui-btn btns">关闭</button>
            <button type="button" class="mui-btn mui-btn-primary">确认</button>
          </div>
        </div>
      </div>
    </div>

    <script src="../../../js/mui.js"></script>
    <script src="../../../js/mui.pullToRefresh.js"></script>
    <script src="../../../js/mui.pullToRefresh.material.js"></script>
    <script src="../../../js/jquery-1.7.2.min.js"></script>
    <script src="../../../js/vue.js"></script>
    <script src="../js/mkeyplus.base.js"></script>
    <script src="../js/indexDBs.js"></script>
    <script type="text/javascript">
      mui.init()
      var size = 15;
      var page = 1;
      var donePage = 1;
      var ids = 0;
	  var self = null;
      let dict = {}
      let lineType=null;
      let db={};
      const dbName = 'myDBs'; // 数据库的名字
      const storeName = 'listPackage'; //仓库名称
	  
      if (window.plus) {
        plusready();
      } else {
        document.addEventListener('plusready', plusready, false);
      }

     async function plusready() {
        self = plus.webview.currentWebview();
        vm.lineType= getSysInfo();
        lineType = getSysInfo();
		
		mui.fire(self.opener(), 'back', {
		  back: 1
		})
		
        console.log('idssss1111100000',lineType, self.workId)
        ids = self.workId
        await openDB(dbName, storeName, 1).then(res=>{
          console.log('openDB',res)
          db = res
        })
        // userId =self.userId
        plus.nativeUI.showWaiting('加载中')
        mui.baseApp.getDict(['valueUnit', 'valueType', 'inputSymbol', 'wpTag']).then(res => {
          // console.log('id222', res)
          vm.dict = res
          dict = res
          vm.wpTagList = res.wpTag
        })
		
		if(!lineType){
		  // 获取离线数据
		  getLineData()
		} else {
		  getDataByKey(db, storeName,ids).then(res=>{
		  	console.log('是否有离线数据',res)
		  	if(res == undefined){
				getProject(page)
				vm.isOnlineAndOfflineData = false
		  	} else {
				getLineData()
				vm.isOnlineAndOfflineData = true
		  	}
		  })
		}
        
      }

      var vm = new Vue({
        el: '#container',
        data: {
		  isOnlineAndOfflineData: false,
          projectList: [],
          taskList: [],
          aList: [],
          yList: [],
          wList: [],
          wpTagList: [],
          dict: {},
          lineType:null
        },
        computed: {
          // getTag(){
          //   return function(tagId){
          //     wpTagList.find(res=>{
          //       console.log('in',res)
          //       if(res.id==tagId&&res.label=="停工待检点"){
          //         return 'tags1'
          //       }
          //     })
          //   }
          // }

        },
        created: function() {

        },
        methods: {
          formatDate(tmp, fmt) {
            return mui.baseApp.formatDate(tmp, fmt)
          },
          getTag(tagId) {
            let tags = this.wpTagList.map(res => {
              // console.log('in', res)
              if (res.id == tagId) {
                if (res.label == "停工待检点") {
                  return 'tags1'
                } else if (res.label == "现场见证点") {
                  return 'tags2'
                } else if (res.label == "旁站点") {
                  return 'tags3'
                } else if (res.label == "技术监督") {
                  return 'tags4'
                }
              }

            })
            return tags
            // if (tagId == 271) {
            //   return 'tags1'
            // } else if (tagId == 272) {
            //   return 'tags2'
            // } else if (tagId == 273) {
            //   return 'tags3'
            // } else {
            //   return ''
            // }
          },
          status(item, v) {
            let status = item.status
            let isReturn = item.isReturn
            if (v == 1) {
              if (isReturn) {
                return '退回'
              } else if (status == 0) {
                return '未开始'
              } else if (status == 1) {
                return '进行中'
              } else if (status == 4 || status == 2) {
                return '已完成'
              }
            } else {
              if (isReturn) {
                return 'b_red'
              } else if (status == 0) {
                return 'b_g0'
              } else if (status == 1) {
                return 'b_g1'
              } else if (status == 4 || status == 2) {
                return 'b_g2'
              }
            }

          },
          getWpTag() {
            mui.baseApp.httpRequst("post", "/app/sys/dictItem/getDictDetail", {
              dictName: 'wpTag'
            }, function(data) {
              console.log('数据列表wpTag', data)
              this.wpTagList = data.data
            }, function() {
              // plus.nativeUI.closeWaiting()
              console.log("获取数据失败");
            })
          },
          toDetail(row, index) {
            //          projectCategory  项目分类，0:常规项目 1:单任务项目
            
            let arr = []
            let currentIndex = 0 // 当前点击工序索引
            vm.projectList.forEach((a, i) => {
              arr = arr.concat(a.taskWps)
              a.childs.forEach((b, index) => {
                arr = arr.concat(b.taskWps)
                b.childs.forEach((c, index) => {
                  arr = arr.concat(c.taskWps)
                })
              })
            })
            let list = arr.map((wp, index) => {
              wp.index = index
              if (wp.id == row.id) {
                currentIndex = wp.index
              }
              return {
                index,
                status: wp.status,
                id: wp.id
              }
            })
            mui.baseApp.openWindow('./workingCode.html', {
              projectTaskId: row.id,
              tagId: row.tagId,
              projectCategory: 1,
              idxs: currentIndex,
              aList: list,
              dbId:ids
            })
          },
          getSearch() {
            mui('.screens').popover('toggle');
            // this.searchs=!this.searchs
          },

          endSearch() {
            let h = $(".head_s .mui-active").attr('href')
            if (h == '#items1') {
              this.projectList = this.aList;
            } else if (h == '#items2') {
              this.projectList = this.yList;
            } else if (h == '#items3') {
              this.projectList = this.wList;
            }
            mui('.screens').popover('toggle');
          }

        }
      });

		;(function ($) {
		  //阻尼系数
		  var deceleration = mui.os.ios ? 0.003 : 0.0009
		  $(".mui-scroll-wrapper").scroll({
			bounce: false,
			indicators: true, //是否显示滚动条
			deceleration: deceleration,
		  })
		  $.ready(function () {
			//循环初始化所有下拉刷新，上拉加载。
			$.each(
			  document.querySelectorAll(".mui-slider-group .mui-scroll"),
			  function (index, pullRefreshEl) {
				
				$(pullRefreshEl).pullToRefresh({
				  down: {
					callback: function () {
					  var self = this
					  setTimeout(function () {
						if (index === 0) {
						  page = 1
						  getProject(page)
						} else {
						  donePage = 1
						}
						self.endPullDownToRefresh()
					  }, 1000)
					},
				  },
				  up: {
					callback: function () {
					  var self = this
					  setTimeout(function () {
						mui.toast("11111")
						console.log(index)
						if (index === 0) {
						  page++
						  getProject(page)
						}
						self.endPullUpToRefresh()
					  }, 1000)
					},
				  },
				})
			  }
			)
			mui("#item1 .mui-scroll").pullToRefresh().endPullUpToRefresh(true)
			// mui("#item1 .mui-scroll").pullToRefresh().endPullUpToRefresh(true)
		  })
		})(mui)
	
      function getProject(page) {
        if(vm.isOnlineAndOfflineData){
          mui.toast("当前是离线数据，无需加载！")
          return
        }
        if (page === 1) {
          // plus.nativeUI.showWaiting('加载中...');
        }
        mui.baseApp.httpRequst("get", "/app/api/project/execution/wp/" + ids + "/3", {
          page: page,
          size: size
        }, function(data) {
          console.log('数据列表', data)
          plus.nativeUI.closeWaiting();
          if (page == 1) {
            vm.projectList = []
          }
          vm.projectList = data.data
          vm.aList = vm.projectList.map((item, index) => {
            return {
              index,
              ...item
            }
          })
		  
		  mui.fire(self.opener(), 'back', {
		    back: 1
		  })
          // data.data.forEach((res)=>{
          //   console.log('idds',res)
          //   if(res.status==2){
          //     console.log('idds12',res)
          //     vm.yList=res;
          //   }else if(res.status==0||res.status==1){
          //     vm.wList=res;
          //   }
          // })
          if (data.data.length < size) { //
            mui("#item1 .mui-scroll").pullToRefresh().endPullUpToRefresh(true); //参数为true代表没有更多数据了。
            return;
          } else {
            mui("#item1 .mui-scroll").pullToRefresh().endPullUpToRefresh(false); //参数为true代表没有更多数据了。
            mui("#item1 .mui-scroll").pullToRefresh().refresh(true); //启用上拉加载
          }
        }, function() {
          // plus.nativeUI.closeWaiting()
          console.log("获取数据失败");
        })
      }
      function getLineData(){
        getDataByKey(db, storeName,ids).then(res=>{
           plus.nativeUI.closeWaiting(); 
          console.log('获取离线数据',res)
          vm.projectList = res&&res.wpItemList||[] 
          vm.aList = vm.projectList.map((item, index) => {
            return {
              index,
              ...item
            }
          })
        })
      }
      function getSysInfo() {
		  // return false
          types = {};
          types[plus.networkinfo.CONNECTION_UNKNOW] = "未知";
          types[plus.networkinfo.CONNECTION_NONE] = "未连接网络";
          types[plus.networkinfo.CONNECTION_ETHERNET] = "有线网络";
          types[plus.networkinfo.CONNECTION_WIFI] = "WiFi网络";
          types[plus.networkinfo.CONNECTION_CELL2G] = "2G蜂窝网络";
          types[plus.networkinfo.CONNECTION_CELL3G] = "3G蜂窝网络";
          types[plus.networkinfo.CONNECTION_CELL4G] = "4G蜂窝网络";
       
          var str = types[plus.networkinfo.getCurrentType()];
          if (str == '未知' || str == '未连接网络') {
              return false;
          } else {
              return true;
          }
      }
      document.getElementById('slider').addEventListener('slide', function(e) {
        console.log(e.detail.slideNumber);
      });
      window.addEventListener('back', function(event) {
        let data = event.detail
        page = 1
        if(lineType){
        	if(vm.isOnlineAndOfflineData){
        		getLineData()
        	}else{
        		getProject(page);
        	}
        }else{
          getLineData()
        }
         
      });
    </script>
  </body>

</html>
